{extend name="layout/layout"}
{block name="content"}
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" data-load="user_active_header">
                    {include file="user_activity/page_menu" menu='ticket' id="$id" /}
                </div>
                <div class="right_main ">
                    <p class="ft24 mb10 ft-bold">票券設定</p>
                    <p class="ft14 gary_c9 mb20 ft-bold">為你的活動設定票券。</p>
                    <div class="block_com" style="min-height: 80vh;">
                        <div class="active_w1 active3 " style="margin:  0 auto;">
                            <form class="layui-form" lay-filter="ticket_form_data"  onsubmit="return false;">
                                <div class="show-block">
                                    <div class="layui-form-item">
                                        <div class="label ">票券說明
                                        </div>
                                        <div class="">
                                                    <textarea lay-verify="required" class="layui-textarea"
                                                              style="min-height: 2rem;" placeholder="请输入票券說明" name="desc"
                                                           >{$ticket.desc|default=''}</textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="label ">售票時間<p class=" tip1">開始時間</p>
                                        </div>
                                        <div class="d-flex">
                                            <input type="text" name="sale_begin" lay-filter="sale_begin" value="{$ticket.sale_begin|default=''}"
                                                   lay-verify="required"
                                                   placeholder="请填写開始時間" autocomplete="off" class="layui-input sale-time-input">
            
                                        </div>
                                        <p class=" tip1 mb10">結束時間</p>
                                        <div class="d-flex">
                                            <input type="text" name="sale_end"  lay-filter="sale_end" value="{$ticket.sale_end|default=''}"
                                                   lay-verify="required"
                                                   placeholder="请填写結束時間" autocomplete="off" class="layui-input sale-time-input">
            
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="label">票券</div>
                                        <table class="layui-table a9_table" lay-skin="line">
                                            <colgroup>
                                                <col>
                                                <col width="150">
                                                <col width="150">
                                                <col width="150">
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th>票券名称</th>
                                                    <th>票券数量</th>
                                                    <th>票价</th>
                                                    <th>是否上架</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody id="ticketTableBody">
                                                
                                                {if isset($ticket.tickets) && count($ticket.tickets)} 
                                                    {volist name="ticket.tickets" id="vo"} 
                                                    <tr class="ticketRow">
                                                        <td><input  class="layui-input" value="{$vo.name}"></td>
                                                        <td>
                                                         
                                                            <input type="number" min="0" value="{$vo.rest_quantity}" class="layui-input">
                                                        </td>
                                                        <td>
                                                            {if isset($vo.price) &&  $vo.price == 0} 
                                                            <input  class="layui-input" value="{$vo.price}" readonly disabled>
                                                             {else /} 
                                                             <input  class="layui-input" value="{$vo.price}" oninput="this.value = this.value.replace(/^0+(\d+)|[^\d.]+/g, '')">
                                                            {/if}
                                                           
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" lay-filter="is_open" name="is_open"  {$vo.is_open == 1 ? 'checked' : ''} lay-skin="switch">
                                                        </td>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="orange_c deleteTicketBtn"><i class="layui-icon mr5 layui-icon-delete"></i>删除</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    {/volist}
                                                {else /} 
                                                    <tr class="ticketRow">
                                                        <td><input  class="layui-input" value=""></td>
                                                        <td>
                                                        
                                                            <input type="number" min="0" value="1" class="layui-input">
                                                        </td>
                                                        <td>
                                                            <input  class="layui-input" value="" oninput="this.value = this.value.replace(/^0+(\d+)|[^\d.]+/g, '')">
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" name="is_open" checked lay-skin="switch">
                                                        </td>
                                                        <td>
                                                            <div class="d-flex">
                                                                <div class="orange_c deleteTicketBtn"><i class="layui-icon mr5 layui-icon-delete"></i>删除</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {/if}
                                                
                                            </tbody>
                                        </table>
                                        <div class="flex-center mt30">
                                            <button data-a9-btn="free" type="button" class="layui-btn layui-btn-primary layui-border-orange layui-btn-lg addTicketBtn"><i class="layui-icon layui-icon-add-circle mr5"></i>免费票</button>
                                            <button data-a9-btn="money" type="button" class="layui-btn layui-btn-primary layui-border-orange layui-btn-lg addTicketBtn"><i class="layui-icon layui-icon-add-circle mr5"></i>付费票</button>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="label ">有效時間(可驗票時間)<p class="tip1">有效時間為可驗票入場的時間，系統自動提前兩小時開放給主辦方現場測試。
                                            </p>
            
                                            <div class="mb20">
                                                <input type="radio"  lay-filter="timeset" value="1" title="有效時間建議設定為活動時間">
                                            </div>
                                            <p class=" tip1">開始時間</p>
                                        </div>
                                        <div class="d-flex">
                                            <input id="datetime-1" type="text" name="ticket_yx_start" lay-verify="required"
                                                placeholder="请填写開始時間" value="{$ticket.ticket_yx_start|default=''}" autocomplete="off" class="layui-input">
            
                                        </div>
                                        <p class=" tip1 mb10">結束時間</p>
                                        <div class="d-flex">
                                            <input id="datetime-1" type="text" name="ticket_yx_end" lay-verify="required"
                                                placeholder="请填写結束時間" value="{$ticket.ticket_yx_end|default=''}" autocomplete="off" class="layui-input">
            
                                        </div>
                                    </div>
                                    <!-- <div class="layui-form-item">
                                        <div class="label ">是否為審核票？<p class="tip1">凡購買此票券都需要經過您的審核</p>
            
                                            <div>
                                                <input type="radio" name="is_verify" value="{$ticket.is_verify|default=0}" {if (!isset($ticket.is_verify) || $ticket.is_verify == 0)}checked{/if}   title="否">
                                                <input type="radio" name="is_verify" value="{$ticket.is_verify|default=1}"  {if (isset($ticket.is_verify) && $ticket.is_verify == 1)}checked{/if}  title="是，都經過我審核">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- <div class="layui-form-item">
                                        <div class="label ">是否開賣？
            
                                        </div>
                                        <div>
                                            <input type="radio" name="is_open" value="1" {if (!isset($ticket.is_open) || $ticket.is_open == 1)}checked{/if} title="發售，活動上架後立即開賣">
                                            <input type="radio" name="is_open" value="0"  {if (isset($ticket.is_open) && $ticket.is_open == 0)}checked{/if} title="停售，該票券暫停對外銷售，並從購票頁中隱藏">
                                        </div>
                                    </div> -->
                                    <div class="layui-form-item">
                                        <div class="label ">購買限制</div>
                                        <div class="d-flex white-nowrap">
                                            <div class="flex-center mr30">
                                                最少<input type="number" name="ticket_min" min="1"  value="{$ticket.ticket_min|default=1}" class="layui-input ml5 mr5">张
                                            </div>
                                            <div class="flex-center">
                                                最多<input type="number" min="1"  name="ticket_max"  value="{$ticket.ticket_max|default=1}" class="layui-input ml5 mr5">张
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="layui-form-item">
                                        <div class="label ">门票数量<p class=" tip1">门票数量，小于0，表示不限制</p>
                                        </div>
                                        <div class="d-flex">
                                            <input type="text" name="stock" value="{$vo.stock|default=''}"
                                                   lay-verify="required"
                                                   placeholder="请填写门票数量" min="1" autocomplete="off" class="layui-input ">
            
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="label ">门票价额<p class=" tip1"></p>
                                        </div>
                                        <div class="d-flex">
                                            <input type="text" name="price" value="{$vo.price|default=''}"
                                                   lay-verify="required"
                                                   placeholder="请填写门票价额" autocomplete="off" class="layui-input ">
            
                                        </div>
                                    </div> -->
                                </div>
            
                           
                           
                            <div class="mt40 d-flex jc-s al-c">
                                <button class="layui-btn layui-btn-lg w100 layui-bg-orange next-btn" lay-submit lay-filter="ticket_form">储存</button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- <script type="text/javascript" src="__ROOT__/public/activity/js/vue3.js?at={:date('his')}"></script>
<script type="text/javascript" src="__ROOT__/public/activity/js/layui-vue.js?at={:date('his')}"></script> -->
<style>
    .layui-dropdown-content {
        position: absolute;
        z-index: 99999999;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #e4e7ed;
        border-radius: var(--dropdown-content-border-radius);
        box-shadow: 0 2px 12px #0000001a;
    }
</style>
<script>
    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '.sale-time-input',
            type: 'datetime',
            fullPanel: true, // 2.8+
            // min:getCurrentTimeInYMDHMSFormat()
        });
        var laydate = layui.laydate;
		laydate.render({
			elem: '#datetime-1',
			type: 'datetime',
			fullPanel: true, // 2.8+
            // min:getCurrentTimeInYMDHMSFormat()
		});
        form.on('radio(timeset)', function(data){
         
            if(data.value == 1){
                form_data = form.val('ticket_form_data');
                form.val('ticket_form_data',{
                    'ticket_yx_start' : form_data.sale_begin,
                    'ticket_yx_end' : form_data.sale_end
                })
                form.render();
            }
        });

        form.on('checkbox(is_open)',function(data){
            console.log(data);
        })
        //
        $(document).ready(function(){
            // 添加门票行
            $(document).on('click', '[data-a9-btn="free"]', function(){
                var $newRow = $('.ticketRow').first().clone();
                $newRow.find("input").val('').prop('disabled', false); // 清空并启用所有输入框
                $newRow.find("input").eq(1).val(1);
                $newRow.find("input").eq(2).val('0').prop('disabled', true); // 将第三个输入框（票价）的值设为0并禁用
                $newRow.find("input").eq(3).prop('checked', true);
                console.log($newRow);
                $('#ticketTableBody').append($newRow);
                form.render(); // 重新渲染表单
            });

            // 添加门票行
            $(document).on('click', '[data-a9-btn="money"]', function(){
                var $newRow = $('.ticketRow').first().clone();
                $newRow.find("input").val('').prop('disabled', false); // 清空并启用所有输入框
                $newRow.find("input").eq(1).val(1);
                $newRow.find("input").eq(2).val('0').prop('disabled', false).removeAttr('readonly'); 
                $newRow.find("input").eq(3).prop('checked', true);
                $('#ticketTableBody').append($newRow);
                form.render(); // 重新渲染表单
            });

            // 删除门票行
            $(document).on('click', '.deleteTicketBtn', function(){
                $(this).closest('.ticketRow').remove();
            });
        });

                //提交
        form.on('submit(ticket_form)', function(data){
              // 收集门票信息
                var tickets = [];
                $('.ticketRow').each(function(){
                    var ticket = {
                        name: $(this).find('input:eq(0)').val(),
                        quantity: $(this).find('input:eq(1)').val(),
                        price: $(this).find('input:eq(2)').val(),
                        is_open: $(this).find('input:eq(3)').attr('checked') ? 1 : 0
                    };
                   
                    if(!ticket.quantity > 0 ) {
                        return layer.msg('票數不得為空！');
                    }
                    if(ticket.name == '' ) {
                        return layer.msg('票名称不得為空！');
                    }
                    tickets.push(ticket);
                });
           
                data.field.tickets = tickets;
                $.quickPost('/activity/user/activity/{$id}/ticket',data.field);
                });
    })


    function getCurrentTimeInYMDHMSFormat() {
        const now = new Date();

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 注意月份是从0开始的，所以需要加1
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }


</script>

{/block}
